<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>优当阅读</title>
	<link rel="stylesheet" type="text/css" href="../plug/swiper/css/swiper.min.css">
	<link rel="stylesheet" type="text/css" href="../plug/layui/css/layui.css">
	<link rel="stylesheet" type="text/css" href="../css/style.css">
	<link rel="stylesheet" type="text/css" href="../font/iconfont.css">
</head>
<!-- 注意body的class -->
<body class="bg_gray">
	<!-- 加载动画 -->
	<div class="load_contain m_flex_box flex_vc flex_hc">
		<svg width="58" height="58" viewBox="0 0 58 58" xmlns="http://www.w3.org/2000/svg">
   		 	<g fill="none" fill-rule="evenodd">
        		<g transform="translate(2 1)" stroke="#FFF" stroke-width="1.5">
		            <circle cx="42.601" cy="11.462" r="5" fill-opacity="1" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="1;0;0;0;0;0;0;0" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		            <circle cx="49.063" cy="27.063" r="5" fill-opacity="0" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="0;1;0;0;0;0;0;0" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		            <circle cx="42.601" cy="42.663" r="5" fill-opacity="0" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="0;0;1;0;0;0;0;0" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		            <circle cx="27" cy="49.125" r="5" fill-opacity="0" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="0;0;0;1;0;0;0;0" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		            <circle cx="11.399" cy="42.663" r="5" fill-opacity="0" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="0;0;0;0;1;0;0;0" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		            <circle cx="4.938" cy="27.063" r="5" fill-opacity="0" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="0;0;0;0;0;1;0;0" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		            <circle cx="11.399" cy="11.462" r="5" fill-opacity="0" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="0;0;0;0;0;0;1;0" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		            <circle cx="27" cy="5" r="5" fill-opacity="0" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="0;0;0;0;0;0;0;1" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		        </g>
		    </g>
		</svg>
	</div>
	<!-- 头部 -->
	<nav class="top_nav pos_f">
		<a href="javascript:history.go(-1)" class="top_a nav_left">
			<i class="iconfont icon-left"></i>
		</a>
		<p class="nav_tit">在线阅读</p>
		<a href="javascript:void(0)" class="top_a nav_right">
			<i class="iconfont icon-more"></i>
		</a>
	</nav>
	<div class="padd_top"></div>
	<section class="read_online_contain_swiper">
		<div class="swiper-container top_swiper">
	        <div class="swiper-wrapper">
	            <a href="#" class="swiper-slide">
	            	<img src="../img/1.png">
	            </a>
	            <a href="#" class="swiper-slide">
	            	<img src="../img/2.png">
	            </a>
	            <a href="#" class="swiper-slide">
	            	<img src="../img/3.png">
	            </a>
	            <a href="#" class="swiper-slide">
	            	<img src="../img/4.png">
	            </a>
	        </div>
	        <div class="swiper-pagination swiper-pagination-white"></div>
	    </div>
	    <a href="#" class="read_online_search m_flex_box flex_vc flex_hc">
			<i class="iconfont icon-sousuo"></i>
			<span>书名、作者、关键词</span>
		</a>
	</section>
	<div class="section_contain_swiper">
		<div class="swiper-container scroll_swiper">
	        <div class="swiper-wrapper">
	            <a href="kind_detail.html" class="swiper-slide">
					<p class="swiper_text">经营励志</p>
					<img src="../img/1.png">
	            </a>
	            <a href="kind_detail.html" class="swiper-slide">
					<p class="swiper_text">科技</p>
					<img src="../img/1.png">
	            </a>
	            <a href="kind_detail.html" class="swiper-slide">
					<p class="swiper_text">文艺</p>
					<img src="../img/1.png">
	            </a>
	            <a href="kind_detail.html" class="swiper-slide">
					<p class="swiper_text">人文社科</p>
					<img src="../img/1.png">
	            </a>
	        </div>
		</div>
    </div>
    <div class="mar_t section_contain">
    	<p class="read_tit">每日推荐</p>
    	<dl>
    		<a href="book_detail.html" class="m_flex_box recommend_dl flex_vc">
    			<dt class="">
	    			<img class="lazy " src="../img/load.gif" data-original="../img/book.png">
	    		</dt>
	    		<dd class="flex-1">
	    			<p class="recommend_tit">一个少年对的笔记</p>
	    			<div class="recommend_intro">
	    				人文社科-心理学人文社科-心理学人文社科-心理学人文社科-心理学人文社科-心理学人文社科-心理学人文社科-心理学人文社科-心理学人文社科-心理学人文社科-心理学人文社科-心理学人文社科-心理学人文社科-心理学人文社科-心理学人文社科-心理学人文社科-心理学人文社科-心理学人文社科-心理学人文社科-心理学人文社科-心理学人文社科-心理学人文社科-心理学人文社科-心理学人文社科-心理学人文社科-心理学人文社科-心理学人文社科-心理学人文社科-心理学人文社科-心理学人文社科-心理学人文社科-心理学人文社科-心理学人文社科-心理学人文社科-心理学人文社科-心理学人文社科-心理学人文社科-心理学人文社科-心理学
	    			</div>
	    			<div class="recommend_box">
	    				人文社科-心理学
	    			</div>
	    		</dd>
    		</a>
    	</dl>
    </div>
    <div class="section_contain bg_gray">
    	<p class="read_tit">好书推荐</p>
    	<div class="good_recommend_contain m_flex_box flex_vw flex_jz">
    		<dl class="good_recommend_contain_dl">
    			<a href="book_detail.html">
    				<dt>
	    				<img src="../img/load.gif" class="lazy" data-original="../img/1.png">
	    			</dt>
	    			<dd>三国影碟2：无所荆州</dd>
    			</a>
    		</dl>
    		<dl class="good_recommend_contain_dl">
    			<a href="book_detail.html">
    				<dt>
	    				<img src="../img/load.gif" class="lazy" data-original="../img/1.png">
	    			</dt>
	    			<dd>三国影碟2：无所荆州</dd>
    			</a>
    		</dl>
    		<dl class="good_recommend_contain_dl">
    			<a href="">
    				<dt>
	    				<img src="../img/load.gif" class="lazy" data-original="../img/1.png">
	    			</dt>
	    			<dd>三国影碟2：无所荆州</dd>
    			</a>
    		</dl>
    		<dl class="good_recommend_contain_dl">
    			<a href="">
    				<dt>
	    				<img src="../img/load.gif" class="lazy" data-original="../img/book.png">
	    			</dt>
	    			<dd>三国影碟2：无所荆州</dd>
    			</a>
    		</dl>
    		<dl class="good_recommend_contain_dl">
    			<a href="">
    				<dt>
	    				<img src="../img/load.gif" class="lazy" data-original="../img/book.png">
	    			</dt>
	    			<dd>三国影碟2：无所荆州</dd>
    			</a>
    		</dl>
    		<dl class="good_recommend_contain_dl">
    			<a href="">
    				<dt>
	    				<img src="../img/load.gif" class="lazy" data-original="../img/book.png">
	    			</dt>
    			</a>
	    			<dd>三国影碟2：无所荆州三国影碟2：无所荆州三国影碟2：无所荆州</dd>
    		</dl>
    	</div>
    </div>
    <a href="book_sc.html" class="body_bottom">
    	<div class="body_bottom_inner"></div>
    </a>
	<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
	<script type="text/javascript" src="../js/public.js"></script>
	<script type="text/javascript" src="../plug/layui/layui.all.js"></script>
	<script type="text/javascript" src="../plug/lazy/jquery.lazyload.min.js"></script>
	<script type="text/javascript" src="../js/clamp.min.js"></script>
	<script type="text/javascript" src="../plug/swiper/js/swiper.jquery.min.js"></script>
	<script type="text/javascript" src="../js/reset_font.js"></script>
	<script type="text/javascript">
		var swiper_top = new Swiper('.top_swiper', {
		        pagination: '.swiper-pagination',
		        effect: 'coverflow',
		        centeredSlides: true,
		        grabCursor: true,
		        slidesPerView: 'auto',
		        coverflow: {
		            rotate: 30,
		            stretch: 0,
		            depth: 90,
		            modifier: 1.3,
		            slideShadows : false,
		        },
		        loop:true,

    	});
    	var scroll_swiper = new Swiper('.scroll_swiper', {
	        slidesPerView: 'auto',
	        centeredSlides: false,
	        spaceBetween: 21,
	        grabCursor: true
	    });
	    $clamp($(".recommend_intro")[0], {clamp: 3});
	</script>
	<script type="text/javascript">
		/*流加载*/
		var dom = '<dl class="good_recommend_contain_dl">'
    				+'<a href="">'
    				+'<dt>'
    				+'<img src="../img/load.gif" class="lazy" data-original="../img/book.png">'
	    			+'</dt>'
    				+'</a>'
	    			+'<dd>三国影碟2：无所荆州三国影碟2：无所荆州三国影碟2：无所荆州</dd>'
    				+'</dl>';
		layui.use('flow', function(){
		    var flow = layui.flow; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
		  	flow.load({
			    elem: '.good_recommend_contain' //流加载容器
			    ,done: function(page, next){ //执行下一页的回调
			      //模拟数据插入
				    setTimeout(function(){
			        	var lis = [];
				        for(var i = 0; i < 8; i++){
			          		lis.push(dom);
				        }
				        next(lis.join(''), page < 10); //假设总页数为 10
				        /*图片懒加载*/
				        lazyImg();
			      	}, 500);
		    	}
		  	});
		});
		function lazyImg(){
			$("img.lazy").lazyload({
	      		effect: "fadeIn",
	      		skip_invisible:false,
		    });
		};
		lazyImg();
	</script>
</body>
</html>